<template>
  <div class="notes">

    <AddEditNote
      v-model:new-note="newNote"
      v-model:new-title="newTitle"
      ref="addEditNoteRef"
    >
      <template #buttons>
        <button
          :disabled="!newTitle || !newNote"
          @click="handleAddNote"
          class="button has-background-success"
        >
          添加
        </button>
      </template>
    </AddEditNote>

    <Note v-for="note in notes" :key="note.id" :note="note" />

  </div>
</template>

<script setup>
import Note from '@/components/notes/Note.vue'
import { useNotesStore } from '@/stores'
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import AddEditNote from '@/components/notes/AddEditNote.vue'

const store = useNotesStore()
const { notes } = storeToRefs(store)
const { addNote } = store

const newNote = ref('')
const newTitle = ref('')
const addEditNoteRef = ref(null)

const handleAddNote = () => {
  addNote(newNote.value, newTitle.value)
  newNote.value = ''
  newTitle.value = ''
  addEditNoteRef.value.focusTextArea()
};

</script>

<style lang="scss" scoped>
.button {
  color: white;
}
</style>